<template>
  <div class="list-container">
    <el-button type="primary" @click="openadd">新增</el-button>
    <el-button type="success" disabled>修改</el-button>
    <el-button type="danger" @click="delAll">删除</el-button>

<!--    &lt;!&ndash;  查询  &ndash;&gt;-->
<!--    <el-form :inline="true" :model="pageForm" class="demo-form-inline">-->
<!--      <el-form-item label="字典标签">-->
<!--        <el-input v-model="pageForm.dictLabel" placeholder="字典标签"></el-input>-->
<!--      </el-form-item>-->

<!--      <el-form-item label="数据状态">-->
<!--        <el-select v-model="pageForm.status" placeholder="数据状态">-->
<!--          <el-option label="正常" value="正常"></el-option>-->
<!--          <el-option label="停用" value="停用"></el-option>-->
<!--        </el-select>-->
<!--      </el-form-item>-->

<!--      <el-form-item>-->
<!--        <el-button type="primary" @click="onSubmit">查询</el-button>-->
<!--        &lt;!&ndash;  添加按钮  &ndash;&gt;-->
<!--        <el-button type="primary" @click="openadd">新增</el-button>-->
<!--      </el-form-item>-->
<!--    </el-form>-->

    <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          prop="dictCode"
          label="字典编码"
          width="120">
      </el-table-column>
      <el-table-column
          prop="dictSort"
          label="字典排序"
          width="120">
      </el-table-column>
      <el-table-column
          prop="dictLabel"
          label="字典标签"
          width="120">
      </el-table-column>
      <el-table-column
          prop="dictValue"
          label="字典键值"
          width="120">
      </el-table-column>
      <el-table-column
          prop="status"
          label="状态"
          width="120">
        <template v-slot="scope">
          <el-tag  type="success" v-if="scope.row.status == 0">正常</el-tag>
          <el-tag  type="info" v-if="scope.row.status == 1">停用</el-tag>
        </template>
      </el-table-column>
      <el-table-column
          prop="createTime"
          label="创建时间"
          width="120">
      </el-table-column>
      <el-table-column
          prop="remark"
          label="备注"
          width="120">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
              size="mini"
              @click="handleEdit(scope.row)">编辑</el-button>
          <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top: 20px">
      <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
      <el-button @click="toggleSelection()">取消选择</el-button>
    </div>


    <!--  分页  -->
    <el-pagination
        @current-change="handleCurrentChange"
        :page-size="pageForm.pageSize"
        layout="total, prev, pager, next"
        :total="total">
    </el-pagination>


    <!--  添加  -->
    <el-dialog title="新增" :visible.sync="dialogFormVisible">
      <el-form :model="addform" :rules="rules" ref="ruleForm">
        <el-form-item label="字典编码" :label-width="formLabelWidth" prop="dictName">
          <el-input v-model="addform.dictCode" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="字典排序" :label-width="formLabelWidth" prop="dictType">
          <el-input v-model="addform.dictSort" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="状态" :label-width="formLabelWidth" prop="status">
          <el-radio v-model="addform.status" label="1">正常</el-radio>
          <el-radio v-model="addform.status" label="2">停用</el-radio>
        </el-form-item>

        <el-form-item label="字典标签" :label-width="formLabelWidth" prop="createBy">
          <el-input v-model="addform.dictLabel" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="创建时间" :label-width="formLabelWidth" prop="createTime">
          <el-date-picker
              v-model="addform.createTime"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择日期">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="字典键值" :label-width="formLabelWidth" prop="updateBy">
          <el-input v-model="addform.dictValue" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="备注" :label-width="formLabelWidth" prop="remark">
          <el-input v-model="addform.remark" autocomplete="off"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </div>
    </el-dialog>

    <!--  修改  -->
    <el-dialog title="修改" :visible.sync="updialogFormVisible">
      <el-form :model="upform" :rules="rules" ref="ruleForm">
        <el-form-item label="字典编码" :label-width="formLabelWidth" prop="dictCode">
          <el-input v-model="upform.dictCode" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="字典排序" :label-width="formLabelWidth" prop="dictType">
          <el-input v-model="upform.dictSort" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="状态" :label-width="formLabelWidth" prop="status">
          <el-radio v-model="upform.status" label="1">正常</el-radio>
          <el-radio v-model="upform.status" label="2">停用</el-radio>
        </el-form-item>

        <el-form-item label="字典标签" :label-width="formLabelWidth" prop="dictLabel">
          <el-input v-model="upform.dictLabel" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="创建时间" :label-width="formLabelWidth" prop="createTime">
          <el-date-picker
              v-model="upform.createTime"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择日期">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="字典键值" :label-width="formLabelWidth" prop="updateBy">
          <el-input v-model="upform.dictValue" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="备注" :label-width="formLabelWidth" prop="remark">
          <el-input v-model="upform.remark" autocomplete="off"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="update">确 定</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>


export default {
  data(){
    return{
      type:sessionStorage.getItem("type"),
      //多选表格参数
      multipleSelection: [],
      tableData:[],
      //查询
      pageForm:{
        pageNum:1,
        pageSize:5,
        dictLabel:'',
        status:'',
        dictCode:'',
      },
      //总条数
      total:0,
      //字典表类型添加
      addform:{},
      dialogFormVisible:false,
      formLabelWidth:"120px",
      //修改
      upform:{},
      updialogFormVisible:false,
      //校验
      rules: {
        dictCode: [
          { required: true, message: '请输入字典编码', trigger: 'blur' },
        ],
        dictLabel: [
          { required: true, message: '请输入字典标签', trigger: 'blur' }
        ],
        createTime: [
          { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
        ],
        dictSort: [
          { required: true, message: '请输入字典排序', trigger: 'blur' }
        ],
        dictValue: [
          { required: true, message: '请输入字典键值', trigger: 'blur' }
        ],
        remark: [
          { required: true, message: '请填写备注', trigger: 'blur' }
        ],
        status: [
          { required: true, message: '请输入状态', trigger: 'blur' }
        ]
      },
      ruleForm: {
        dictCode: '',
        dictLabel: '',
        createTime: '',
        dictSort: '',
        remark: '',
        status:'',
      },
    }
  },
  methods:{
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //查询方法
    onSubmit(){
      this.axios.post("http://localhost:8004/dictData/dictDataList?pageNum="+this.pageForm.pageNum+"&pageSize="+this.pageForm.pageSize+"&dictLabel=" + this.pageForm.dictLabel+"&status="+this.pageForm.status+"&dictType="+this.type).then(res=>{
        this.tableData=res.data.data.list
      })
    },
    //分页方法
    handleCurrentChange(pageNum){
      this.pageForm.pageNum = pageNum
      this.onSubmit()
    },
    add(){
      this.axios.post("http://localhost:8004/dictData/dictDataAdd",this.addform).then(()=>{
        this.dialogFormVisible = false
        this.$message.success("添加成功")
      })
    },
    openadd(){
      this.dialogFormVisible = true
      this.onSubmit()
    },
    //修改
    update(){
      this.axios.post("http://localhost:8004/dictData/updateDataById",this.addform).then(()=>{
        this.updialogFormVisible = false
        this.$message.success("修改成功")
      })
    },
    handleEdit(row){
      this.updialogFormVisible = true
      this.upform = row
      this.onSubmit()
    },
    //单删
    handleDelete(row){
      if(confirm("确定删除" + row.dictCode + "吗?")){
        this.axios.delete("http://localhost:8004/dictData/delDataById?dictCode=" + row.dictCode).then(()=>{
            this.$message.success("删除成功")
        })
      }
    },
    //批量删除
    delAll(){
      let dictCode = this.multipleSelection.map(obj=>obj.dictCode).join();
      this.$confirm("此操作将永久删除用户性别信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(()=>{
        console.log(dictCode)
        this.axios.delete("http://localhost:8004/dictData/delAll?dictCode=" + dictCode).then(()=>{
          this.$message.success("删除成功")
          this.onSubmit()
        })
      })
    },

  },
  created() {
    this.onSubmit()

  }
}
</script>

<style>
.list-container {
  width: 80%;
  margin: 0 auto;
}

</style>
